<template>
  <div class="container">
    <el-container>
      <el-header>
        <v-buttons :userType="userType"></v-buttons>
        <span style="float:right"><span style="margin-right:50px">{{userType}}  :  {{username}}</span>Message
        <span class="el-icon-bell" style="margin-left:10px"></span>0</span>
      </el-header>
      <el-main>
        <div class="cover">
          <v-su v-if="userType==='Superuser'"></v-su>
          <v-branch v-else-if="userType==='Manager'"></v-branch>
          <v-user v-else></v-user>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import VSu from '../GDFunc/GDFunctionSu'
  import VBranch from '../GDFunc/GDFunctionBranch'
  import VUser from '../GDFunc/GDFunctionUser'
  import VButtons from '../GDFunc/GDFunctionButtons'

  export default {
    name: "GDFunction",
    components: {
      VSu,
      VBranch,
      VUser,
      VButtons
    },
    data() {
      return {
        activeIndex: '1',
        userType: 'User'
      }
    },
    methods: {},
    mounted() {
      if (this.$route.name === 'function' && !this.$store.state.username) this.$router.push('/');
      let fun;
      switch (this.username) {
        case 'su':
          this.userType = 'Superuser';
          fun = [
            'Order Manage',
            'Branch Manage',
            'Material Manage',
            'User Manage'
          ];
          break;
        default:
          this.userType = 'User';
          fun = [
            'Menu',
            'Self Info',
            'History Order'
          ]
      }
      let i=0;
      for (const managerListElement of this.api.managerList) {
        if(managerListElement.id===this.$store.state.user.id){
          this.userType='Manager';
          this.$store.commit('setBranch',i);
          fun=[
            'Order',
            'Material',
            'Info'
          ]
        }
        i++
      }
      this.$store.commit('setFun', fun);

    },
    computed: {
      username() {
        return this.$store.state.username;
      }
    }

  }
</script>

<style scoped>
  .el-header {
    line-height: 60px;
    border-radius: 4px;
    background: #fff;
    margin: 10px 220px 0px 20px;
    box-shadow: 0 1px 4px #b4b4b4;
    font-size: 15px;
    color: #4c4c4c;
  }

  .container {
    position: absolute;
    left: 300px;
    top: 5px;
    width: calc(100% - 320px);
    height: calc(100% - 10px);
  }

  .container .el-container, .container .el-container .el-main {
    height: 100%;
  }

  .cover {
    background: #ffffff;
    position: relative;
    top: -5px;
    width: calc(100%);
    min-height: 600px;
    /*height:100%;*/
    border-radius: 4px;
    box-shadow: 0 1px 4px #b4b4b4;
  }

</style>
